<template>
  <div>
    <div
      class="catalog-list__item"
      :style="{ paddingLeft: (level * 0.2) + 'rem' }"
      @click="handleClick(itemData)"
    >
      <div :class="getDocClass(itemData.read)"></div>
      <div class="content">
        <h2 class="title">{{ itemData.name }}</h2>
        <p class="res-count">{{ itemData.res || 0 }}个资源</p>
      </div>
      <div class="arrow">
        <van-icon name="arrow" />
      </div>
    </div>
    <CatalogItem
      v-for="item in itemData.child"
      :key="item.id"
      :item-data="item"
      :level="level + 1"
      @catalog-click="handleClick"
    />
  </div>
</template>

<script>

export default {
  name: 'CatalogItem',
  components: {},
  mixins: [],
  props: {
    level: {
      type: Number,
      default: 0
    },
    itemData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {

    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    getDocClass(read) {
      const classList = ['not-read', 'in-read', 'reading']
      return `dot ${classList[read]}`
    },
    handleClick(item) {
      console.log(item, '点击了章节')
      this.$emit('catalog-click', item)
    }
  }
}
</script>

<style scoped lang="less">
.catalog-list__item {
  border-bottom: 1px solid #ddd;
  padding: 8px 5px 8px 0;
  display: flex;
  align-items: center;
  &:nth-last-child(1) {
    //border-bottom: 0;
  }
  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    &.not-read {
      background-color: #e0e0e0;
    }
    &.in-read {
      background-color: #40ea99;
    }
    &.reading {
      background-color: #f5e13c;
    }
  }
  .content {
    flex: 1;
    padding: 0 5px;
    h2.title {
      font-weight: normal;
      font-size: 14px;
      margin-bottom: 8px;
      color: #333;
    }
    p.res-count {
      color: #bcadae;
      font-size: 12px;
    }
  }
  .arrow {
    font-size: 16px;
    color: #999;
  }
}
</style>
